import React, { useEffect, useRef, useState } from 'react';
import { Button, Card, Col, Form, FormInstance, Input, Row } from 'antd';
import { logingApi, getCaptchaApi } from '@/api/auth/index';

// 验证码时间戳
const date = new Date().getTime().toString();

const onFinish = (values: any) => {
  console.log('Success:', values);
  // 登录
  logingApi({ ...values, checkKey: date }).then(res => {
    console.log(res);
  });
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

export default function Login() {
  // 获取验证码
  const [captcha, setCaptcha] = useState('');
  useEffect(() => {
    getCaptchaApi(date).then(res => {
      setCaptcha(res.result);
    });
  }, []);

  // 表单输入框
  const formRef = useRef<FormInstance>(null);

  return (
    <div className="h-100vh flex flex-col justify-center">
      <h1 className="p-30px text-30px">邦邦物流管理系统-react</h1>
      <Card className="mx-auto" style={{ width: 500 }}>
        <Form
          name="basic"
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          ref={formRef}
        >
          <Form.Item name="username" rules={[{ required: true, message: '请输入用户名!' }]}>
            <Input placeholder="请输入用户名/admin" />
          </Form.Item>

          <Form.Item name="password" rules={[{ required: true, message: '请输入密码!' }]}>
            <Input.Password placeholder="请输入密码/123456" />
          </Form.Item>

          <Form.Item name="captcha" rules={[{ required: true, message: '请输入验证码!' }]}>
            <Row gutter={8}>
              <Col span={18}>
                <Input placeholder="请输入验证码"></Input>
              </Col>
              <Col span={6}>
                <img src={captcha} alt="验证码" />
              </Col>
            </Row>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
            <Button type="primary" htmlType="submit" className="w-full h-40px">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
